<template>
    <div class="order-refund-apply-list-item">
        <van-card class="order-refund-apply-list-item-card van-hairline--bottom"
                  :title="name" :thumb="imageUrl" :num="quantity" :price="totalAmount"/>
        <van-field v-model="item.amount" type="number" label="退款金额"
                   class="order-refund-apply-list-item-amount"
                   :rules="[
                     { required: true, message: '请输入退款金额', trigger:'onChange'},
                     { validator: amountNotZeroValidator, message: '输入的退款金额必须大于0', formatter: amountFormatter, trigger:'onChange'},
                     { validator: amountValidator, message: '输入的退款金额超出最大可退款金额', formatter: amountFormatter, trigger:'onChange'}]"/>
        <div class="order-refund-apply-list-item-tip">{{refundAmountsTip}}</div>
        <white-space/>
    </div>
</template>

<script>
  import BigDecimal from "decimal.js"
  import * as _ from "lodash"
  import { Card, Field } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import WingBlank from "@/components/WingBlank"

  export default {
    name: "OrderRefundApplyListItem",
    components: {
      WingBlank,
      WhiteSpace,
      [Card.name]: Card,
      [Field.name]: Field,
    },
    props: {
      index: [String, Number],
      item: Object,
      name: String,
      imageUrl: String,
      quantity: [String, Number],
      totalAmount: [String, Number],
      refundingAmount: [String, Number],
      refundedAmount: [String, Number],
    },
    computed: {
      refundableAmount() {
        const { item } = this
        return new BigDecimal(item.totalAmount).sub(item.refundedAmount).sub(item.refundingAmount).toNumber()
      },
      refundAmountsTip() {
        const { refundableAmount, refundingAmount, refundedAmount } = this
        const tips = [`最多还可退 ¥ ${refundableAmount}`]
        if (refundedAmount) {
          tips.push(`，已退款 ¥ ${refundedAmount}`)
        }
        if (refundingAmount) {
          tips.push(`，退款中 ¥ ${refundingAmount}`)
        }
        return _.join(tips, "")
      },
    },
    data() {
      return {}
    },
    methods: {
      amountNotZeroValidator(value) {
        return new BigDecimal(value).greaterThan(0)
      },
      amountValidator(value) {
        const { totalAmount, item } = this
        return new BigDecimal(totalAmount).sub(item.refundedAmount).sub(item.refundingAmount).sub(value).greaterThanOrEqualTo(0)
      },
      amountFormatter(value) {
        return _.isEmpty(value) ? 0 : _.toNumber(value)
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-refund-apply-list-item {
        .order-refund-apply-list-item-card {
            background: #fff;
        }

        .order-refund-apply-list-item-amount {
            ::v-deep .van-field__control {
                color: $orange-dark;
            }
        }

        .order-refund-apply-list-item-tip {
            margin: 4px 9px;
            color: $gray-6;
            font-size: 13px;
        }
    }
</style>
